<template>
    <el-dialog :modelValue="onceVisible" :title="props.info == undefined ? '新增' : '单次执行'" width="30%"
        :before-close="handleClose">
        <el-form :model="form" label-width="120px" class="form" :rules="rules" ref="ruleFormRef">
            <!-- <el-form-item label="序号" prop="id">
                <el-input v-model="form.id" />
            </el-form-item> -->
            <el-form-item label="任务ID" prop="jobId">
                <el-input v-model="form.jobId" />
            </el-form-item>
            <el-form-item label="接口类型" prop="beanName">
                <!-- <el-input v-model="form.beanName" /> -->
                <el-select v-model="form.beanName" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in beanName" :key="item.beanName" :label="item.beanName"
                        :value="item.beanName" />
                </el-select>
            </el-form-item>
            <!-- <el-select v-model="form.beanName" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="item in beanName" :key="item.beanName" :label="item.beanName" :value="item.beanName" />
            </el-select> -->
            <el-form-item label="目标数据库类型" prop="methodName">
                <el-input v-model="form.methodName" />
            </el-form-item>
            <el-form-item label="目标表名" prop="methodParams">
                <el-input v-model="form.methodParams" />
            </el-form-item>
            <el-form-item label="cron表达式" prop="cronExpression">
                <el-input v-model="form.cronExpression" />
            </el-form-item>
            <el-form-item label="状态" prop="jobStatus">
                <!-- <el-switch v-model="form.jobStatus"  active-value="1" inactive-value="0"/> -->
                <el-switch v-model="form.jobStatus"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1"
                    inactive-value="0" inline-prompt active-text="启动" inactive-text="停止" />
            </el-form-item>
            <el-form-item label="任务名称" prop="remark">
                <el-input v-model="form.remark" />
            </el-form-item>
            <el-form-item label="存储过程名称" prop="procName">
                <el-input v-model="form.procName" />
            </el-form-item>
            <el-form-item label="源数据库连接" prop="sdbUrl">
                <!-- <el-input v-model="form.sdbUrl" /> -->
                <el-select v-model="form.sdbUrl" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in dblist" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="目标数据库连接" prop="tdbUrl">
                <!-- <el-input v-model="form.tdbUrl" /> -->
                <el-select v-model="form.tdbUrl" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in dblist" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间" prop="beginTime">
                <!-- <el-input v-model="form.beginTime" /> -->
                <el-date-picker v-model="form.beginTime" type="datetime" placeholder="Pick a Date"
                    format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <!-- <el-input v-model="form.endTime" /> -->
                <el-date-picker v-model="form.endTime" type="datetime" placeholder="Pick a Date"
                    format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="主键名称" prop="pkName">
                <el-input v-model="form.pkName" />
            </el-form-item>
            <el-form-item label="医疗机构代码" prop="yydm">
                <el-input v-model="form.yydm" />
            </el-form-item>
            <el-form-item label="医疗机构名称" prop="yymc">
                <el-input v-model="form.yymc" />
            </el-form-item>
            <!-- 按钮操作组 -->
            <el-form-item class="btn">
                <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button @click="close(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, onBeforeMount } from 'vue'
import { onceJob, addJob, GetDblist } from '../../../../http';
import { JobModel } from '../class/JobModel';
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from 'element-plus'
import { info } from 'sass';
const ruleFormRef = ref<FormInstance>()
const props = defineProps({
    onceVisible: Boolean,
    info: JobModel,
})
const value = ref(1)
const form = ref({
    jobId: props.info?.jobId,
    beanName: "",
    methodName: "",
    methodParams: "",
    cronExpression: "",
    jobStatus: "",
    remark: "",
    createTime: "",
    updateTime: "",
    procName: "",
    sdbUrl: "",
    tdbUrl: "",
    beginTime: "",
    endTime: "",
    pkName: "",
    yydm: "",
    yymc: "",
})
//接口方式
const beanName = [
    { beanName: "insert" }, { beanName: "api" }
]

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
})
// onMounted(async () => {
//     let res = GetDblist()
//     console.log(res);

// })

//#region 组件挂之前，初始化数据
interface ListItem1 {
    name: string;
    type: string;
    dbname: string;
    url: string;
    username: string;
    password: string;
}
//数据库连接列表
const dblist = ref<ListItem1[]>([]);
onBeforeMount(async () => {
    let ref1 = await GetDblist();
    // console.log(ref1.data);
    dblist.value = ref1.data;
    // console.log(dblist.value);
});
//#endregion


//监听
watch(
    () => props.info,
    async (newInfo, oldInfo) => {

        if (newInfo != null) {
            let currInfo: JobModel = (JSON.parse(newInfo as any)) as JobModel
            form.value = {
                jobId: currInfo.jobId,
                beanName: currInfo.beanName,
                methodName: currInfo.methodName,
                methodParams: currInfo.methodParams,
                cronExpression: currInfo.cronExpression,
                // jobStatus: "1",
                jobStatus: currInfo.jobStatus,
                remark: currInfo.remark,
                createTime: currInfo.createTime,
                updateTime: currInfo.updateTime,
                procName: currInfo.procName,
                sdbUrl: currInfo.sdbUrl,
                tdbUrl: currInfo.tdbUrl,
                beginTime: currInfo.beginTime,
                endTime: currInfo.endTime,
                pkName: currInfo.pkName,
                yydm: currInfo.yydm,
                yymc: currInfo.yymc,
            }
            //         let res = await GetDblist() as any
            // console.log(res);
        } else {
            form.value = {
                jobId: 0,
                beanName: "",
                methodName: "",
                methodParams: "",
                cronExpression: "",
                jobStatus: "0",
                remark: "",
                createTime: "",
                updateTime: "",
                procName: "",
                sdbUrl: "",
                tdbUrl: "",
                beginTime: "",
                endTime: "",
                pkName: "",
                yydm: "",
                yymc: "",
            }
            //         let res = await GetDblist() as any
            // console.log(res);
        }
    }
);
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloseAdd"])
const handleClose = (done: () => void) => {
    emits("CloseAdd")
}

const submit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    var parms = {

        jobId: form.value.jobId,
        beanName: form.value.beanName,
        methodName: form.value.methodName,
        methodParams: form.value.methodParams,
        cronExpression: form.value.cronExpression,
        jobStatus: form.value.jobStatus,
        remark: form.value.remark,
        createTime: "",
        updateTime: "",
        procName: form.value.procName,
        sdbUrl: form.value.sdbUrl,
        tdbUrl: form.value.tdbUrl,
        beginTime: form.value.beginTime,
        endTime: form.value.endTime,
        pkName: form.value.pkName,
        yydm: form.value.yydm,
        yymc: form.value.yymc,
    }
    if (props.info == undefined) {
        // 执行添加逻辑 
        const res = await addJob(parms) as any
        // console.log(res);
        // const res = true
        if (res.status) {
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
        }
    } else {
        // 执行修改逻辑
        const res = await onceJob(parms) as any
        // console.log(res);
        // const res = true
        if (res.status) {
            ElMessage({
                message: '编辑成功！',
                type: 'success',
            })
        }
    }
    ruleFormRef.resetFields()
    emits("CloseAdd")
}
const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}


</script>
<style lang="scss" scoped>
.form {
    min-height: 800px;

    .btn {
        position: absolute;
        bottom: 10px;
    }
}
</style>
